<template>
	<!-- 默认使用系统头部，如需开启自定义头部配置
		1. pages.json -> globalStyle -> navigationStyle: custom 
		2. common -> config -> navbar: custom 
	-->
	<view v-if="iShow">
		<view class="use-navbar w-full pos-t-full" style="padding-bottom: 6px;" :style="{ 'background': bgColor, 'opacity': bgOpacity }" :class="{ 'fixed': fixed, 'bg-main': type == 'white', 'bg-drak': type == 'gray' }">
			<view class="w-full" :style="{ height: menuButtonInfo.top + 'px' }"></view>

			<!-- 头部导航 -->
			<view class="dflex-b border-radius-lg padding-lr-sm w-full use-hover" :style="{ height: navbarTitleHeight + 'px' }">
				<view class="wpre-15 dflex">
					<view v-if="back" class="" @click="toback">						
							<uni-icons  type="left" color="#5e6d82" size="22" />
					</view>
					<block v-else>
						<slot name="left" />
					</block>
				</view>
				<view class="wpre-75">
					<block v-if="type == 'custom'">
						<slot name="title"/>
					</block>
					<block v-else>
						<text class="fwbd fs">{{ apptitle }}</text>
					</block>
				</view>
				<view class="wpre-10 dflex-e">
					<slot name="right" />
				</view>
			</view>
		</view>

		<!-- 头部组件占位符 -->
		<view v-if="fixed && placeholder" :style="{ height: navbarHeight + 'px' }"></view>
	</view>
</template>

<script>
	import {
		useUserStore
	} from '@/store'
	let UserStore = useUserStore()
	export default {
		props: {
			fixed: {
				type: [Number, Boolean],
				default: !0
			},
			placeholder: {
				type: [Number, Boolean],
				default: !0
			},
			back: {
				type: Boolean,
				default: null
			},
			title: {
				type: String,
				default: null
			},
			type: {
				type: String,
				default: 'gray'
			},
			leftIcon: {
				type: String,
				default: 'icon-fanhuijiantou'
			},
			bgColor: {
				type: String,
				default: '#44bdf5'
			},
			bgOpacity: {
				type: Number,
				default: .97
			},
			show: {
				type: Boolean,
				default: null
			}
		},
		data() {
			return {
				apptitle: '',
				statusBarHeight: 0,systemInfo:{}
			};
		},
		watch: {
			title(nv, ov) {
				this.apptitle = nv;
			}
		},
		computed: {
			menuButtonInfo() {
				let menuButtonInfo = {
					top: 6
				};
				// #ifdef MP-WEIXIN
				menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				console.log('menuButtonInfo', menuButtonInfo);
				// #endif

				// #ifdef H5-WEIXIN
				menuButtonInfo.top = 6;
				// #endif

				return menuButtonInfo;
			},
			navbarCustomHeight() {
				return this.systemInfo.customBar;
			},
			navbarStatusHeight() {
				// #ifdef MP-WEIXIN
				return 32;
				// #endif
				// #ifdef APP-PLUS || H5
				return this.systemInfo.statusBar;
				// #endif
			},
			navbarTitleHeight() {
				return 32;
			},
			navbarHeight() {
				if (this.iShow) {
					return this.menuButtonInfo.top + this.navbarTitleHeight + 5;
				}

				return 0;
			},
			leftIconfont() {
				const pageArrs = getCurrentPages();

				if (!pageArrs.length) return '';

				if (pageArrs[pageArrs.length - 1].route.indexOf('/tabbar/') !== -1) {
					return '';
				}

				if (pageArrs.length < 2) {
					return 'icon-fanhuijiantou fs-xl';
				}

				return this.leftIcon
			},
			config() {
				return this.$config;
			},
			iShow() {
				return this.show !== null ? this.show : this.config.navbar == 'custom';
			}
		},
		methods: {
			toback() {
				console.log("后退");
				if (getCurrentPages().length < 2) {
					this.$utils.tolaunch();
					return;
				}

				uni.navigateBack({
					delta: 1
				});
			},
		},
		created() {
			this.apptitle = this.$config.appname;
			this.systemInfo=UserStore.systemInfo
		}
	};
</script>

<style lang="scss">
	.use-navbar-placeholder {
		min-height: 32px;
	}

	.use-navbar {
		min-height: 32px;
		z-index: 99;background-color: $page-color-blue;
	}

	/*状态栏*/
	.status-bar {
		// position: fixed;
		// z-index: 99;
		// top: 0;
		// left: 0;
		// height: var(--status-bar-height);
		// width: 100%;
	}
</style>